<template>
<div class=" publicBox " id="character">

<div class="boxItem " id="publicSearch">
<el-form ref="form" :inline="true"  class="demo-form-inline">
<el-row>
       <el-form-item>
                 <el-button @click="addUser()" class="pubBtnGree140" type="primary">新建角色</el-button>
       </el-form-item>
</el-row>

</el-form>
</div>
          <public-table class="colum" 
          @handleEdit="handleEdit"
          :columnDefs="columnDefs" 
          :tableData="tableData" 
          :order=false
          :total="total"
          :btn="['edit']"
          ></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/system.js"
export default {
  components: {
         publicTable
  },
  data() {
    return {
        pageNum:1,
        pageSize:100,
        total:0,
        supplierName:"",
        columnDefs :[
            {headerName: '角色名称', field: 'name',width:250},
            {headerName: '角色描述', field: 'remark',width:250},
            {headerName: '角色权限', field: 'string_agg',width:649}
        ],
        tableData: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    
    handleEdit(row){
      this.$router.push({path:"/platform/system/characterNewbuild",query:{data:row}})
    },
    addUser(){
        this.$router.push({path:"/platform/system/characterNewbuild"})
    },
    async getCharacterAPI(){
      let params={page:this.pageNum,size:this.pageSize,name:this.supplierName}
      let res = await API.getCharacterAPI(params)
      if(res.IsPositive){
          this.tableData=res.Data
        }else{
          this.$message.error({message:res.ErrorCode})
        }
    }


  },
  created() {
    this.getCharacterAPI()
  },
  mounted() {
    

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
</style>